<template>
  <div class="attend_detail">
    <div class="attend_detail_left">
      <div class="info_detail_title">
        <span class="title_name">{{ detailInfo.repairTitle }}</span>
      </div>
      <div class="right_box">
        <div class="attend_main">
          <div class="add_info">
            <div class="info_radio">
              <el-radio-group v-model="detailInfo.repairType" disabled>
                <el-radio label="1">维修</el-radio>
                <el-radio label="2">更换</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="table_con" ref="table_con">
            <div class="add_tab">
              <table class="table">
                <tr class="tr_head">
                  <th>申请部门</th>
                  <td>{{ detailInfo.orgName }}</td>
                  <th>申请人</th>
                  <td>{{ detailInfo.createBy }}</td>
                  <th>申请时间</th>
                  <td>{{ detailInfo.createTime }}</td>
                </tr>
                <tr>
                  <th>型号</th>
                  <td class="board_td_l" colspan="6">
                    <p class="pre_line" v-html="removeHtmlStyle(detailInfo.model)"></p>
                  </td>
                </tr>
                <tr>
                  <th>事由</th>
                  <td class="board_td_l" colspan="6">
                    <p class="pre_line" v-html="removeHtmlStyle(detailInfo.reason)"></p>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div
          class="btn_check"
          v-if="['2', '3', '4'].includes(userType) && detailInfo.status === '0' && firstType !== '0'">
          <el-button size="small" type="primary" @click="approvalData('1')">通 过</el-button>
          <el-button size="small" type="danger" @click="approvalData('2')">不通过</el-button>
        </div>
      </div>
    </div>
    <div class="attend_detail_r">
      <div class="add_r_title">审批流程</div>
      <repairSteps ref="refsFlow" :activeInfo="detailInfo" />
    </div>
    <XnDialog
      title="审批意见"
      :visible.sync="dialogShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="50%"
      left="10vw"
      class="branch_dialog"
      @closed="dialogShow = false">
      <el-input
        type="textarea"
        v-model="suggest"
        placeholder="请输入审批意见"
        rows="5"
        maxlength="50"
        show-word-limit></el-input>
      <div class="btn_save">
        <el-button class="btnBorder" size="medium" @click="dialogShow = false">取 消</el-button>
        <el-button size="medium" class="btnBg" type="primary" @click="submit('2')">确认提交</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import repairSteps from './repairSteps'
import { getRepairDetail, submitapproveForm } from '@apis/api-dailyManage.js'
import moment from 'moment'
import XnDialog from '@com/xnDialog.vue'
export default {
  components: {
    repairSteps,
    XnDialog,
  },
  props: {
    userType: {
      type: String,
      default: '',
    },
    firstType: {
      type: String,
      default: '',
    },
    activeInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      moment: moment,
      applyType: '1',
      timeNow: moment().format('YYYY-MM-DD'),
      model: '',
      reason: '',
      detail: {},
      detailInfo: {},
      dialogShow: false,
      suggest: '',
    }
  },
  watch: {
    activeInfo: {
      handler(news) {
        if (news) {
          this.isEdit = false
          this.detail = news
          this.getRepairDetail()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    if (this.$route.query.id && this.$route.query.type === '2') {
      this.detail = this.$route.query
      this.getRepairDetail()
    }
  },
  methods: {
    approvalData(type) {
      this.suggest = ''
      if (type === '2') {
        this.dialogShow = true
      } else {
        this.submit(type)
      }
    },
    getRepairDetail() {
      getRepairDetail({
        id: this.detail.id,
      }).then(res => {
        if (res.code === 0) {
          this.detailInfo = res.data
        }
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    submit(type) {
      if (type === '2' && this.suggest.trim().length === 0) {
        this.$message.warning('请填写审批意见')
        return
      }
      submitapproveForm({
        content: this.suggest,
        id: this.detailInfo.id,
        processInstanceId: this.detailInfo.processInstanceId,
        status: type,
        taskId: this.detailInfo.taskId,
      }).then(res => {
        if (res.code === 0) {
          this.dialogShow = false
          this.$message.success('审批成功')
          this.$emit('addSuccess', 'detail')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_detail {
  height: 100%;
  font-size: 16px;
  display: flex;
  .attend_detail_left {
    height: 100%;
    width: calc(100% - 300px);
  }
  .attend_detail_r {
    flex: 1;
    width: 300px;
    height: 99%;
    padding: 10px;
    border-left: 1px solid #ececec;
    overflow-y: auto;
    margin-bottom: 10px;
    min-height: 380px;
    .add_r_title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
  .info_detail_title {
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    font-size: 20px;
    padding-left: 20px;
    text-align: center;
  }
  .right_box {
    height: calc(100% - 60px);
    width: 100%;
    .attend_main {
      width: 100%;
      padding: 0 20px;
      height: calc(100% - 60px);
      margin: 0 auto;
      overflow-y: auto;
      .info_radio {
        text-align: right;
        .el-radio {
          margin-right: 20px;
          /deep/.el-radio__label {
            font-size: 18px;
          }
        }
        /deep/.is-disabled {
          .is-checked {
            .el-radio__inner {
              border-color: #2b78f1 !important;
              background: #2b78f1 !important;
              &::after {
                background-color: #ffffff;
              }
            }
          }
          .el-radio__inner {
            border-color: #dcdfe6 !important;
            background: #ffffff !important;
          }
          .el-radio__label {
            color: #606266;
          }
        }
      }
    }
    .table_con {
      .add_tab {
        padding-top: 10px;
        .table {
          width: 100%;
          border-collapse: collapse;
          color: #606266;
          .tr_head {
            line-height: 32px;
            th,
            td {
              padding: 8px 0;
              font-size: 16px;
            }
          }
          .week_input {
            font-size: 15px;
            /deep/ .el-textarea__inner {
              line-height: 2;
            }
          }
          tr {
            border: 1px solid #b5b5b5;
            line-height: 28px;
            th {
              width: 16%;
              border: 1px solid #b5b5b5;
              text-align: center;
              padding: 0px 10px;
              font-size: 16px;
              font-weight: normal;
            }
            td {
              border: 1px solid #b5b5b5;
              text-align: center;
              padding: 5px 10px;
              width: 16%;
            }
            .no_data_sum {
              height: 120px;
            }
            .board_td_l {
              text-align: left;
            }
            .board_th_color {
              color: #a7a7a7;
            }
          }
          .week_input {
            /deep/ .el-textarea__inner {
              border: none;
              border-radius: 0;
              width: 100%;
            }
            /deep/.el-textarea__inner {
              border-radius: 0;
            }
            /deep/.el-input__inner {
              // background: #f5f6fa;
              border: none;
              border-radius: 0;
              width: 100%;
            }
          }
        }
      }
    }
    .btn_check {
      margin-top: 10px;
      margin-right: 10px;
      text-align: right;
    }
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
}
.branch_dialog {
  /deep/.el-dialog__body {
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0;
    .el-radio {
      margin-right: 20px;
    }
    .el-textarea {
      margin: 20px 0;
    }
    .btn_save {
      text-align: right;
    }
  }
}
</style>
